<template>
  <div id="city">
    <van-index-bar :index-list="letter">
      <div v-for="cities in citylist" :key="cities.type" id="box">
        <van-index-anchor style="font-size: 16px;" :index="cities.type" />
        <van-cell
          v-for="city in cities.citylist"
          :key="city.id"
          @click="getcityid(city.id,city.name)"
        >
          <span>{{city.name}}</span>
        </van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell } from "vant";

Vue.use(IndexBar);
Vue.use(Cell);
Vue.use(IndexAnchor);
export default {
  props: ["cities"],
  watch: {
    cities(newValue, oldValue) {
      this.getcities();
    },
  },
  data() {
    return {
      letter: [],
      citylist: [],
    };
  },
  methods: {
    getcities() {
      for (let i = 65; i < 91; i++) {
        this.letter.push(String.fromCharCode(i));
      }
      let n = [];
      for (let i = 0; i < 26; i++) {
        if (this.cities[this.letter[i]]) {
          this.citylist.push({
            type: this.letter[i],
            citylist: this.cities[this.letter[i]],
          });
        } else {
          n.push(i);
        }
      }
    },
    getcityid(id, name) {
      console.log(name);
      this.$store.commit("getcityid", [id, name]);
      this.$router.push("/city");
    },
  },
};
</script>

<style>
#city #box {
  width: 100%;
}
</style>